<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
        
    </transition>
    
    <DialogModal :control.sync="dialogControl" :options="options" @done="dialogDone"></DialogModal>
    <mobileDialog :control.sync="mobileControl" :options="mobileoptions" @done="mobileDone"></mobileDialog>
    <passwordialog :control.sync="passwordControl" :options="passwordoptions" @done="passwordDone"></passwordialog>
    <LoadingBg :state="loadingState"></LoadingBg>
    <Tips :control.sync="tipsControl" :text="tipsText" :timeout="tipsTimeOut"></Tips>
  </div>
</template>

<script>
import DialogModal from "@/components/Dialog";
import mobileDialog from "@/components/mobileVerification";
import passwordialog from "@/components/passwordialog";
import LoadingBg from "@/components/Loading-bg";
import Tips from "@/components/Tips";
export default {
  data() {
      return {
        dialogControl: false,
        mobileControl: false,
        passwordControl: false,
        options: "",
        mobileoptions: "",
        passwordoptions: "",
        loadingState: false,
        tipsControl: false,
        tipsText: "",
        tipsTimeOut: ""
      };
    },
  mounted() {
      this.getUserInfo();
      this.addModalEvent();
    },
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    },
    dialogDone(tag) {
      if (typeof this.options.callback == "function") {
        this.options.callback(tag);
      }
    },
    mobileDone(tag) {
      if (typeof this.mobileoptions.callback == "function") {
        this.mobileoptions.callback(tag);
      }
    },
    passwordDone(tag) {
      if (typeof this.passwordoptions.callback == "function") {
        this.passwordoptions.callback(tag);
      }
    },
    addModalEvent() {
      // dialog event
      //  otps => { title: string, message: string, callback: function }
      this.$root.$on("openDialog", opts => {
        this.options = opts;
        this.dialogControl = true;
      });
      this.$root.$on("mobileDialog", opts => {
        this.mobileoptions = opts;
        this.mobileControl = true;
      });
      this.$root.$on("passwordDialog", opts => {
        this.passwordoptions = opts;
        this.passwordControl = true;
      });
      // Loading event
      this.$root.$on("openLoading", _ => {
        this.loadingState = true;
      });
      this.$root.$on("closeLoading", _ => {
        this.loadingState = false;
      });
      // tips
      //  options => { text: string, time: number} | string
      this.$root.$on("openTips", options => {
        if (typeof options === "string") {
          this.tipsText = options;
          this.tipsTimeOut = "";
        } else {
          this.tipsText = options.text;
          this.tipsTimeOut = options.time;
        }
        this.tipsControl = true;
      });
      this.$root.$on("closeTips", _ => {
        this.tipsControl = false;
      });
    }
  },
  components: {
    DialogModal,
    LoadingBg,
    Tips,
    mobileDialog,
    passwordialog
  }
}
</script>

<style>
 
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif, "Source", "微软雅黑";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 7.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -3.75rem;
  text-align: center;
  background-color: #f5f5f5;
  -webkit-overflow-scrolling: touch;
  
  /* font-family: Source;
  text-align: center;
  background-color: #f5f5f5; */
}

</style>
